$(function () {
    var form = layui.form

    // 1.获取文章分类列表， 渲染到下拉框
    function getCateList() {

        $.ajax({
            url: '/my/article/cates',
            method: 'GET',
            success: function (res) {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }

                // 渲染列表
                var htmlStr = template('cate-tpl', res)
                console.log(htmlStr)
                $('[name="cate_id"]').append(htmlStr)

                // 修改后，重新渲染表单
                form.render() //更新全部
            }
        })
    }

    getCateList()

    // 初始化裁剪区
    // 3.1. 初始化富文本编辑器
    initEditor()

    // 3.2. 初始化图片裁剪器
    var $image = $('#image')

    // 3.3. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)

    // 点击封面，弹出文件选择框
    $('#choose-cover').click(function () {
        $('#file').click()
    })

    // 监听文件框的 change 事件， 替换裁剪区图片
    $('#file').change(function () {
        // 获取选择的图片
        var files = this.files
        if (files.length == 0) {
            return
        }

        // 替换裁剪区图片
        // 根据文件，创建对应的 URL 地址
        var newImgURL = URL.createObjectURL(files[0])
        // 为裁剪区域重新设置图片
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })

    // 文件上传成功状态
    var state = '已发布'

    // 6.监听表单的提交事件，发送请求
    $('#form-publish').on('submit', function (e) {
        e.preventDefault()
        // 6.1 快速获取表单所有内容， formdata 对象
        var fd = new FormData(this)
        // 6.2 遍历 fd 数据
        fd.forEach(item => console.log(item))

        // 4. 将封面裁剪过后的图片，输出为一个文件对象
        $image
            .cropper('getCroppedCanvas', {
                // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {
                // 6.3手动向 fd 中添加封面 和 状态数据
                fd.append('cover_img', blob)
                fd.append('state', state)

                $.ajax({
                    url: '/my/article/add',
                    method: 'POST',
                    data: fd,
                    // 上传文件必填项
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        if (res.status != 0) {
                            return layer.msg(res.message)
                        }
                        layer.msg('发布成功!')

                        location.href = '/article/art-list.html'

                        // 自动高亮列表导航
                        window.parent.highLightList()
                    }
                })
            })

    })

    // 7. 给存为草稿按钮绑定点击事件， 修改state 值
    $('#save-draft').click(function () {
        state = '草稿'
    })







})